<template>
  <div class="main">
    <div class="blankContent"></div>
    <el-form :model="settingInfo" ref="settingInfo" class="announcement" label-width="160px">
      <!-- 临时额度设置 -->
      <div class="basicInfo">
        <i>临时额度设置</i>
        <el-form-item prop="sysQuota" label="上限比例：">
          <el-input v-model.trim="settingInfo.sysQuota" placeholder="上限比例" onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''">
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <p class="tip">说明：临时额度=固定额度*上限比例</p>
        </el-form-item>
      </div>
      <!--  商户主营数量设置 -->
      <div class="settingContent">
        <i>商户主营数量设置</i>
        <el-form-item prop="sysMainBusCount" label="商户主营数量：">
          <el-input v-model.trim="settingInfo.sysMainBusCount" placeholder="商户主营数量" onkeyup="value=value.replace(/[^\d]/g,'')" @blur="blurVal" clearable>
          </el-input>
        </el-form-item>
        <el-form-item>
          <p class="tip">设置数量为1，供应商则只能勾选1个主营商品类别</p>
        </el-form-item>
        <el-form-item prop="sysSubBusCount" label="商户兼营数量：">
          <el-input v-model.trim="settingInfo.sysSubBusCount" placeholder="商户兼营数量" onkeyup="value=value.replace(/[^\d]/g,'')" clearable>
          </el-input>
        </el-form-item>
        <el-form-item>
          <p class="tip">设置数量为2，供应商则只能勾选2个主营商品类别</p>
        </el-form-item>
        <el-form-item>
          <div class="btnGroup">
            <el-button type="primary" @click="submitForm">提交</el-button>
          </div>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
    export default {
        name: "ParamSet",
        data() {
          return {
            settingInfo: {
              sysquotaId: "",
              sysQuota: "",
              sysMainBusCountId: "",
              sysMainBusCount: "",
              sysSubBusCountId: "",
              sysSubBusCount: ""
            },
          }
        },
        methods: {
          blurVal() {
            this.settingInfo.sysMainBusCount = this.settingInfo.sysMainBusCount.replace(/[^\d]/g,'')
            this.settingInfo.sysSubBusCount = this.settingInfo.sysSubBusCount.replace(/[^\d]/g,'')
          },
          getData() {
            ajax.get(apis.setting.getSetting).then(result => {
              if(result.code == "10000000") {
                  this.settingInfo.sysquotaId = result.data[2].id
                  this.settingInfo.sysQuota = result.data[2].cvalue
                  this.settingInfo.sysMainBusCountId = result.data[0].id
                  this.settingInfo.sysMainBusCount = result.data[0].cvalue
                  this.settingInfo.sysSubBusCountId = result.data[1].id
                  this.settingInfo.sysSubBusCount = result.data[1].cvalue
              } else {
                this.$message.error(result.message)
              }
            })
          },
          submitForm() {
            let data = [
              {
                id: this.settingInfo.sysquotaId,
                cvalue: this.settingInfo.sysQuota
              },
              {
                id: this.settingInfo.sysMainBusCountId,
                cvalue: this.settingInfo.sysMainBusCount
              },
              {
                id: this.settingInfo.sysSubBusCountId,
                cvalue: this.settingInfo.sysSubBusCount
              }
            ]
            ajax.post(apis.setting.paramsSetting, data).then(result => {
              if(result.code == "10000000") {
                this.$message({
                  message: '保存成功',
                  type: 'success'
                });
                this.getData()
              } else {
                this.$message.error(result.message)
              }
            })
          }
        },
        created() {
          this.getData()
        }
    }
</script>

<style lang="scss" scoped>
  .main {
    display: flex;
    min-width: 1000px;
    min-height: 800px;
    justify-content: flex-start;
    .blankContent {
      width: 16%;
      min-width: 200px;
    }
    .announcement {
      padding: 40px 0 0 150px;
      margin-top: 20px;
      width: 84%;
      min-width: 500px;
      border-radius: 4px;
      background: #fff;
      box-sizing: border-box;
      .el-input {
        width: 80%;
        max-width: 400px;
      }
      .basicInfo {
        position: relative;
        width: 640px;
        .tip {
          margin-top: 10px;
        }
        i {
          position: absolute;
          left: -280px;
          padding: 5px 0 5px 20px;
          display: block;
          width: 180px;
          height: 40px;
          line-height: 40px;
          color: #fff;
          font-style: normal;
          background: #9ea7b4;
        }
        i:after {
          background-color: transparent;
          content: "";
          position: absolute;
          top: 0;
          right: -50px;
          border: 25px solid;
          border-color: transparent transparent transparent #9ea7b4;
        }
      }
      .settingContent {
        position: relative;
        top: 20px;
        .tip {
          font-size: 12px;
          color: #999;
        }
        i {
          position: absolute;
          left: -280px;
          padding: 5px 0 5px 20px;
          display: block;
          width: 180px;
          height: 40px;
          line-height: 40px;
          color: #fff;
          font-style: normal;
          background: #9ea7b4;
        }
        i:after {
          background-color: transparent;
          content: "";
          position: absolute;
          top: 0;
          right: -50px;
          border: 25px solid;
          border-color: transparent transparent transparent #9ea7b4;
        }
        #editorElem {
          width: 60%;
        }
        .btnGroup {
          margin-top: 20px;
          .el-button {
            padding: 12px 40px;
          }
        }
      }
    }
  }
</style>
